<script setup>
import { ref } from 'vue'
import { randomListService } from '@/api/music.js'
import { getCoverService } from '@/api/download.js'
import { Record, Time, User, Music } from '@icon-park/vue-next'
import { useRouter } from 'vue-router'

const router = useRouter()
const carouselData = ref([])
const randomList = async () => {
  const resp = await randomListService(4)
  if (resp.code === 1) {
    carouselData.value = resp.data
  }
}
randomList()
const formattedTime = (duration) => {
  const [minutes, seconds] = duration.split(':') // 分割分钟和秒
  return `${minutes}分${seconds}秒`
}

const clickD = async (id) => {
  await router.push('/details?id=' + id)
}
</script>

<template>
  <div class="index1">
    <h1>——&nbsp;歌曲推荐&nbsp;——</h1>
    <el-carousel height="300px" motion-blur>
      <el-carousel-item v-for="music in carouselData" :key="music.id">
        <el-container @click="clickD(music.id)">
          <el-aside width="300px">
            <van-image
              class="img-radius"
              width="300px"
              height="300px"
              :src="getCoverService(music.id)"
            >
              <template v-slot:error>
                <music theme="outline" size="20" fill="#333" :strokeWidth="3" />
              </template>
            </van-image>
          </el-aside>
          <el-container>
            <el-main>
              <h1>{{ music.name }}</h1>
              <div>
                <p>
                  <span class="title">
                    <user theme="outline" size="18" fill="#333" />
                    &nbsp;作者：
                  </span>
                  <span class="container">
                     {{ music.artist }}
                  </span>
                </p>
                <p>
                  <span class="title">
                    <record theme="outline" size="18" fill="#333" />
                  &nbsp;专辑：
                  </span>
                  <span class="container">
                     {{ music.album }}
                  </span>
                </p>
                <p>
                  <span class="title">
                    <Time theme="outline" size="18" fill="#333" />
                    &nbsp;时长：
                  </span>
                  <span class="container">
                      {{ formattedTime(music.duration) }}
                  </span>
                </p>
              </div>

            </el-main>
          </el-container>
        </el-container>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style scoped>
.index1 {
  text-align: center;
  padding: 25px 20px;

  h1 {
    margin-top: 0;
    margin-bottom: 10px;
  }

  .el-carousel {
    border-radius: 8px;
    width: 80%;
    background-color: #dad4cb;
    margin: 0 auto 25px;

    .el-container {
      .el-main {
        margin: 0;
        padding: 0;
        text-align: center;

        h1 {
          font-size: 36px;
          margin-top: 15px;
        }

        div {
          text-align: left;
          width: 40%;
          margin: 0 auto;

          p {
            display: flex;
            align-items: center;

            .title {
              white-space: nowrap;
              display: inline-flex;
              align-items: center;
            }
          }
        }
      }
    }
  }
}
</style>
